<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mono Emoji Encoding</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f7fa;
        color: #333;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
      h1 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 30px;
      }
      .input-group {
        margin-bottom: 20px;
      }
      label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #2c3e50;
      }
      textarea {
        width: 100%;
        min-height: 100px;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 16px;
        resize: vertical;
        box-sizing: border-box;
      }
      .btn-group {
        display: flex;
        gap: 10px;
        margin: 20px 0;
      }
      button {
        flex: 1;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
      .btn-encode {
        background-color: #3498db;
        color: white;
      }
      .btn-encode:hover {
        background-color: #2980b9;
      }
      .btn-decode {
        background-color: #27ae60;
        color: white;
      }
      .btn-decode:hover {
        background-color: #219653;
      }
      .btn-clear {
        background-color: #95a5a6;
        color: white;
      }
      .btn-clear:hover {
        background-color: #7f8c8d;
      }
      .result {
        margin-top: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        min-height: 60px;
      }
      .result-label {
        font-weight: bold;
        margin-bottom: 8px;
        color: #2c3e50;
      }
      .emoji-output {
        font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
        font-size: 18px;
        line-height: 1.8;
        word-wrap: break-word;
      }
      .copy-btn {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
        float: right;
      }
      .copy-btn:hover {
        background-color: #2980b9;
      }
      .legend {
        margin-top: 30px;
        padding: 15px;
        background-color: #fef9e7;
        border-radius: 8px;
        border-left: 4px solid #f39c12;
      }
      .legend h3 {
        margin-top: 0;
        color: #d35400;
      }
      .legend ul {
        margin: 10px 0;
        padding-left: 20px;
      }
      .legend li {
        margin: 5px 0;
      }
      .success-message {
        color: #27ae60;
        font-weight: bold;
      }
      .error-message {
        color: #e74c3c;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="input-group">
        <label for="inputText">请输入要处理的文字：</label>
        <textarea id="inputText" placeholder="在这里输入你想编码或解码的文字..."></textarea>
      </div>

      <div class="btn-group">
        <button class="btn-encode" onclick="handleEncode()">➡️ 编码为表情符号</button>
        <button class="btn-decode" onclick="handleDecode()">⬅️ 解码为文字</button>
        <button class="btn-clear" onclick="clearAll()">🗑️ 清空</button>
      </div>

      <div class="result">
        <div class="result-label">结果：</div>
        <div id="outputText" class="emoji-output">结果将显示在这里...</div>
        <button class="copy-btn" onclick="copyResult()">📋 复制结果</button>
      </div>
    </div>
    <div
      id="notification"
      style="
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px 15px;
        border-radius: 6px;
        color: white;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        z-index: 1000;
      "
    ></div>
  </body>
  <script>
    const mono_emoji_table = [
      "(ㅎ‸ㅎ)", //0
      "(ㅎ_ㅎ)", //1
      "(ㅎ~ㅎ)", //2
      "(ㅎ...ㅎ)", //3
      "(ㅎ-ㅎ)", //4
      "(ㅎ◡ㅎ)", //5
      "(ㅎ▴ㅎ)", //6
      "(ㅎ v ㅎ)", //7
      "(ㅎuㅎ)", //8
      "(ㅎ∀ㅎ)", //9
      "(ㅎ‸ㅎ;)", //10
      "(ㅎ'‸'ㅎ)", //11
      "(ㅎ皿ㅎ)", //12
      "(ㅎ↓_ㅎ↑)", //13
      "|ωㅎ`)", //14
      "(ㅎ👅ㅎ)", //15
    ];

    const mono_emoji_to_number_table = new Map([
      ["(ㅎ‸ㅎ)", "0"], //0
      ["(ㅎ_ㅎ)", "1"], //1
      ["(ㅎ~ㅎ)", "2"], //2
      ["(ㅎ...ㅎ)", "3"], //3
      ["(ㅎ-ㅎ)", "4"], //4
      ["(ㅎ◡ㅎ)", "5"], //5
      ["(ㅎ▴ㅎ)", "6"], //6
      ["(ㅎ v ㅎ)", "7"], //7
      ["(ㅎuㅎ)", "8"], //8
      ["(ㅎ∀ㅎ)", "9"], //9
      ["(ㅎ‸ㅎ;)", "a"], //10
      ["(ㅎ'‸'ㅎ)", "b"], //11
      ["(ㅎ皿ㅎ)", "c"], //12
      ["(ㅎ↓_ㅎ↑)", "d"], //13
      ["|ωㅎ`)", "e"], //14
      ["(ㅎ👅ㅎ)", "f"], //15
    ]);

    function encoding(str) {
      let unicode_hex_str = "";
      for (let it of str) {
        let hex_str = it.charCodeAt(0).toString(16);
        while (hex_str.length < 4) hex_str = "0" + hex_str;
        unicode_hex_str += hex_str;
      }
      let encode_str = "";
      for (let it of unicode_hex_str) {
        const index = parseInt("0x" + it);
        encode_str += mono_emoji_table[index];
      }
      return encode_str;
    }

    function decoding(str) {
      let unicode_hex_str = "";
      let tmp_str = "";
      for (let it of str) {
        tmp_str += it;
        // 简单粗暴
        if (it === ")") {
          const hex = mono_emoji_to_number_table.get(tmp_str);
          if (hex === undefined) throw new Error(`Illegal String: ${tmp_str}`);
          unicode_hex_str += hex;
          tmp_str = "";
        }
      }
      let decode_str = "";
      for (let i = 0; i < unicode_hex_str.length; i += 4) {
        decode_str += String.fromCharCode(parseInt("0x" + unicode_hex_str.substring(i, i + 4)));
      }
      return decode_str;
    }

    function handleEncode() {
      const inputText = document.getElementById("inputText").value;
      if (!inputText.trim()) {
        showNotification("请输入要编码的文字", true);
        return;
      }

      try {
        const encoded = encoding(inputText);
        document.getElementById("outputText").textContent = encoded;
        showNotification("编码成功！");
      } catch (error) {
        document.getElementById("outputText").textContent = "编码出错: " + error.message;
        showNotification("编码出错: " + error.message, true);
      }
    }

    function handleDecode() {
      const inputText = document.getElementById("inputText").value;
      if (!inputText.trim()) {
        showNotification("请输入要解码的表情符号", true);
        return;
      }

      try {
        const decoded = decoding(inputText);
        document.getElementById("outputText").textContent = decoded;
      } catch (error) {
        document.getElementById("outputText").textContent = "解码出错: " + error.message;
        showNotification("出错: " + error.message, true);
      }
    }

    function clearAll() {
      document.getElementById("inputText").value = "";
      document.getElementById("outputText").textContent = "结果将显示在这里...";
      showNotification("已清空");
    }

    function copyResult() {
      const resultText = document.getElementById("outputText").textContent;
      if (resultText === "结果将显示在这里...") {
        showNotification("没有可复制的内容", true);
        return;
      }

      navigator.clipboard
        .writeText(resultText)
        .then(() => {
          showNotification("已复制到剪贴板");
        })
        .catch((err) => {
          showNotification("复制失败: " + err, true);
        });
    }

    function showNotification(message, isError = false) {
      const notification = document.getElementById("notification");
      notification.textContent = message;
      notification.style.backgroundColor = isError ? "#e74c3c" : "#27ae60";
      notification.style.opacity = "1";

      setTimeout(() => {
        notification.style.opacity = "0";
      }, 3000);
    }
  </script>
</html>
